<template>
  <el-card>
    <el-row class="content">
      <!-- 头像 -->
      <el-avatar shape="circle" :size="130" fit="cover" src="src\assets\background\background2.png" />
    <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
      <el-form-item label="姓名">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
    </el-form>
    </el-row>
    <el-row class="submit">
      <el-button>登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
    </el-row>
    <el-row class="register">
      <div>没有账号?&nbsp;&nbsp;<a href="javascript:;">注册</a>一个</div>
      <div class="forget"><a href="">忘记密码</a></div>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('right')

const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})
</script>

<style scoped>
*{
  font-size: 20px;
  text-align: center;
  color:rgb(74, 155, 254)
}
.el-card {
  width: 800px;
  height: 400px;
  /* background-color: #000; */
  margin: 120px auto;
  border-radius: 20px;
  position: relative;
  background-color: rgba(103, 171, 233,0.2);
}
/* 样式穿透 */
:deep(.el-card__body) {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.el-form {
  flex: auto;
  width: 400px;
  /* margin: auto; */
}
:deep(.el-form-item__label){
  font-size: 20px;
}
.submit{
  margin-top: 10px;
  
}
.submit .el-button{
  padding:20px 56px;
  text-align: justify;;
}

/* 注册 */
.register{
  position: absolute;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.forget {
  margin-top: 10px;
}
</style>